<script setup lang="ts">
import {ref,reactive,shallowRef,shallowReactive,watch} from "vue"

let num=ref(0)
let name=ref("鑫")
let info=reactive({
  name:"yx",
  age:18
})
//watch函数表示实时侦听
watch(num,(newVal,oldVal)=>{
  console.log(newVal,oldVal)
})
//watch函数监听多个数据，可以用放入数组里表示
watch([num,name],(newVal,oldVal)=>{
  console.log(newVal,oldVal)
})
//watch函数监听对象，新值和旧值会一样，因为是引用类型，值更改都会改
watch(info,(newVal,oldVal)=>{
  console.log(newVal,oldVal)
},
//deep属性表示深层次监听
{deep:true})
//watch函数监听对象的某个属性，需要用函数形式返回属性
watch(()=>info.age,(newVal,oldVal)=>{
  console.log(newVal,oldVal)
})
//
</script>

<template>
  <div>
    <input type="number" v-model="num">
    <input type="text" v-model="info.name">
    <input type="number" v-model="info.age">
    <input type="text" v-model="name">
    <!-- <div>判断为偶数还是奇数：{{ parity }}</div>
    <div>输出为二倍：{{ twice }}</div>
    <button @click="change">改变num</button> -->
  </div>
</template>

<style scoped>

</style>
